// import { getBannerAPI } from '@/apis/category'
import { ref, onMounted } from 'vue'
import { getHotGoodsForBannerAPI } from '@/apis/home'
import { ElMessage } from 'element-plus'
export const useBanner = () => {
  // 轮播图逻辑
  const bannerList = ref([])
  const getBanner = async () => {
    // const res = await getBannerAPI({ distributionSite: '2' })
    try {
      // 调用 API，请求 3 个热销商品（可根据轮播图需求调整数量）
      const res = await getHotGoodsForBannerAPI(3)

      // 校验接口返回（需与后端统一的响应格式匹配）
      // 后端返回格式：{code: 200, success: true, msg: "...", data: [商品数组]}
      if (res.code === 200 && res.success && Array.isArray(res.data)) {
        // 转换数据格式：将商品的 pic 字段映射为轮播图需要的 imgUrl
        bannerList.value = res.data.map(good => ({
          id: good.id,          // 轮播项唯一标识（必须，用于 el-carousel-item 的 key）
          imgUrl: good.pic,     // 轮播图图片 URL（核心，对应商品的 pic 字段）
          name: good.name       // 商品名（用于图片 alt 文本，优化 SEO 和体验）
        }))
        console.log('轮播图数据加载成功：', bannerList.value)
      } else {
        // 无数据时的处理
        bannerList.value = []
        ElMessage({ type: 'info', message: res.msg || '暂无热销商品' })
      }
    } catch (error) {
      // 接口请求失败的处理
      bannerList.value = []
      ElMessage({ type: 'error', message: '轮播图数据加载失败，请稍后重试' })
      console.error('轮播图接口请求错误：', error)
    }
  }
  onMounted(() => getBanner())
  return {
    bannerList
  }
}
